<template>
  <div class="container">
    <div class="content">
      <h3>列表数据</h3>
       <!-- 员工数据看板-页面销售额开始 -->
      <div class="proCharts" ref='charts'></div>
      <!-- 员工数据看板-页面销售额结束 -->

      <div style="display:flex">
         <!-- 电商数据看板-销售总额7天变化趋势开始 -->
      <div class="marketLimit" id="totalSales" ref='totalSales'></div>
       <!-- 电商数据看板-销售总额7天变化趋势结束 -->

        <!-- 电商数据看板-下单金额分布占比开始 -->
      <div class="buyMoney" id="buyMoney" ref='buyMoney'></div>
       <!-- 电商数据看板-下单金额分布占比结束 -->
      </div>

        <!-- 电商数据看板-商品销售订单 -->
      <div class="market" id="market" ref='market'></div>
       <!-- 电商数据看板-商品销售订单 -->

          <!-- 员工数据看板-销售额 -->
      <div class="staffData" id="staffData" ref='staffData'></div>
       <!-- 员工数据看板-销售额 -->
      <div style="display:flex">
            <!-- 客户数据看板-客户购买频次分布 -->
          <div class="clientData" id="clientData" ref='clientData'></div>
          <!-- 客户数据看板-客户购买频次分布 -->

              <!-- 客户统计数据-新老客户人数对比 -->
          <div class="numberComparison " id="numberComparison" ref='numberComparison'></div>
          <!-- 客户统计数据-新老客户人数对比 -->
          </div>
     </div>

  </div>
</template>

<script>
import 'echarts/map/js/china.js'
export default {
  data () {
    return {
    }
  },
  mounted () {
    this.mycharts() // 员工数据看板页面销售额
    this.drawLine()// 电商数据看板销售总额7天变化趋势
    this.handlerBuyMoney()// 电商数据看板下单金额分布占比开始
    this.barGraph() // 电商数据看板商品销售订单
    this.handlerStaffData() // 员工数据看板-销售额
    this.handlerClientData()// 客户数据看板-客户购买频次分布
    this.handlerNumberComparison()// 客户统计数据-新老客户人数对比
  },
  created () {
  },

  watch: {

  },
  methods: {
    // 员工数据看板页面销售额
    mycharts () {
      const charts = this.$echarts.init(this.$refs.charts, 'macarons')
      window.addEventListener('resize', function () {
        charts.resize() // myChart 是实例对象
      })
      charts.setOption({
        // 员工数据看板页面销售额开始
        color: ['#1edacd', '#4168e7', '#2bd753'],
        title: {
          text: ''
        },
        tooltip: { // 提示框
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          trigger: 'axis',
          textStyle: {
            color: '#333' // 设置文字颜色
          },
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#fff' // 设置背景颜色
        },
        legend: { // 图例的类型
          icon: 'roundRect', // 图例icon图标
          left: 'right', // 顶部线条按钮对齐方式
          data: [// 顶部线条按钮
            {
              name: '天兰',
              textStyle: {
                color: '#2A2E34'// 顶部线条按钮文字颜色
              }

            }, {
              name: '健驰',
              textStyle: {
                color: '#2A2E34'// 顶部线条按钮文字颜色
              }
            },
            {
              name: '龙源事业部',
              textStyle: {
                color: '#2A2E34'// 顶部线条按钮文字颜色
              }

            }
          ]

        },
        grid: { // 调整图标位置
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '17%',
          containLabel: true // grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: 'category', // 坐标轴类型。
          boundaryGap: false, // 坐标轴两边留白策略
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLabel: { // 坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: {
              color: '#999999',
              fontSize: 10
            }
          },
          axisLine: { // 坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: { // 坐标轴刻度相关设置。
            show: true
          }
        },
        yAxis: {
          gridIndex: 0,
          // type: 'value',
          axisLabel: { // x轴的坐标文字
            show: true,
            textStyle: {
              color: '#999999' // 文字的颜色
            }

          },
          max: 100, // 最大值100
          axisLine: { // 坐标轴轴线相关设置
            show: false, // false 不显示Y轴线条
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: { // 坐标轴刻度相关设置。
            show: false
          },
          splitLine: { // 坐标在grid区域的分割线
            show: true,
            lineStyle: { // 设置分割线的样式(图表横线颜色)
              type: 'dashed'
            }
          }
        },
        series: [
          {
            type: 'line',
            smooth: true, // 是否润滑：曲线
            seriesLayoutBy: 'row',
            name: '天兰',
            showSymbol: false, // 去掉线中的原点
            data: [56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            lineStyle: {
              color: '#1edacd' // 线的颜色
            }

          },
          {
            smooth: true, // 是否润滑：曲线
            seriesLayoutBy: 'row',
            name: '健驰',
            type: 'line',
            showSymbol: false, // 去掉线中的原点
            data: [51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
            lineStyle: {
              color: '#4168e7' // 线的颜色

            }
          },
          {
            smooth: true, // 是否润滑：曲线
            seriesLayoutBy: 'row',
            name: '龙源事业部',
            type: 'line',
            showSymbol: false, // 去掉线中的原点
            data: [40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
            lineStyle: {
              color: '#2bd753' // 线的颜色
            }
          }
        ]

      // 员工数据看板页面销售额结束
      })
      // 图表自适应
      window.addEventListener('resize', function () {
        charts.resize() // myChart 是实例对象
      })
    },
    // 电商数据看板销售总额7天变化趋势
    drawLine () {
      // 图表自适应
      const totalSales = this.$echarts.init(document.getElementById('totalSales'))
      totalSales.setOption({
        // 员工数据看板页面销售额开始
        color: ['#4168e7', '#14d8cb'],
        title: {
          text: ''
        },
        tooltip: { // 提示框
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          trigger: 'axis',
          textStyle: {
            color: '#333' // 设置文字颜色
          },
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#fff' // 设置背景颜色
        },
        legend: { // 图例的类型
          icon: 'roundRect', // 图例icon图标
          // left: 'right', // 顶部线条按钮对齐方式
          data: [// 顶部线条按钮
            {
              name: 'GMV',
              textStyle: {
                color: '#2A2E34'// 顶部线条按钮文字颜色
              }

            }, {
              name: '环比金额',
              textStyle: {
                color: '#2A2E34'// 顶部线条按钮文字颜色
              }
            }

          ]

        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '17%',
          containLabel: true // grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: 'category', // 坐标轴类型。
          boundaryGap: false, // 坐标轴两边留白策略
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLabel: { // 坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: {
              color: '#999999',
              fontSize: 10
            }
          },
          axisLine: { // 坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: { // 坐标轴刻度相关设置。
            show: true
          }
        },
        yAxis: {
          gridIndex: 0,
          // type: 'value',
          axisLabel: { // x轴的坐标文字
            show: true,
            textStyle: {
              color: '#999999' // 文字的颜色
            }

          },
          max: 100, // 最大值100
          axisLine: { // 坐标轴轴线相关设置
            show: false, // false 不显示Y轴线条
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: { // 坐标轴刻度相关设置。
            show: false
          },
          splitLine: { // 坐标在grid区域的分割线
            show: true,
            lineStyle: { // 设置分割线的样式(图表横线颜色)
              type: 'dashed'
            }
          }
        },
        series: [
          {
            type: 'line',
            smooth: true, // 是否润滑：曲线
            seriesLayoutBy: 'row',
            name: 'GMV',
            showSymbol: false, // 去掉线中的原点
            data: [56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  // 渐变色实现===
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    // 三种由深及浅的颜色
                    [{
                      offset: 0,
                      color: '#4168e7'
                    }, {
                      offset: 1,
                      color: '#ffffff'
                    }])
                },
                lineStyle: { // 线的颜色
                  color: '#4168e7'
                },
                // 以及在折线图每个日期点顶端显示数字
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            }
          },
          {
            smooth: true, // 是否润滑：曲线
            seriesLayoutBy: 'row',
            name: '环比金额',
            type: 'line',
            showSymbol: false, // 去掉线中的原点
            data: [51.1, 51.4, 55.1, 53.3, 73.8, 68.7],

            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  // 渐变色实现===
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                    // 三种由深及浅的颜色
                    [{
                      offset: 0,
                      color: '#14d8cb'
                    }, {
                      offset: 1,
                      color: '#ffffff'
                    }])
                },
                lineStyle: { // 线的颜色
                  color: '#14d8cb'
                },
                // 以及在折线图每个日期点顶端显示数字
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  }
                }
              }
            }
          }

        ]

      // 员工数据看板页面销售额结束
      })
      window.addEventListener('resize', function () {
        totalSales.resize() // myChart 是实例对象
      })
    },
    // 电商数据看板下单金额分布占比开始
    handlerBuyMoney () {
      const buyMoney = this.$echarts.init(document.getElementById('buyMoney'))
      buyMoney.setOption({
        title: {
          text: '下单金额分布占比',
          left: 'left',
          top: 20,
          textStyle: {
            color: '#333333'
          }
        },
        tooltip: {
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          trigger: 'item',
          textStyle: {
            color: '#333' // 设置文字颜色
          },
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#fff', // 设置背景颜色
          // formatter: '{b} : {c} ({d}%)'
          formatter: function (params, ticket, callback) {
            console.log(params)
            // params.forEach((item) => {
            return `<div ><span class="fl" style="display:inline-block;margin-top:6px;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${params.color}"></span><span class="fl"> ${params.name}  </span><p style='display: flex;justify-content: space-between;'><span style="padding-left:18px;margin-right: 40px;"> 订单总数 </span> ${params.value} </p><p style='display: flex;justify-content: space-between;'><span style="padding-left:18px;margin-right: 45px;"> 占比 </span>${params.percent}%</p></div>`
          }

        },

        legend: {
          icon: 'circle', // 按钮设置 circle为圆形
          itemWidth: 10,
          itemHeight: 10,
          width: 280,
          itemGap: 20,
          bottom: 5,
          left: 'center'
          // data: ['0-180元', '180-220元', '220-270元', '270-315元', '315-360元', '360元以上'],

        },
        color: ['#4168e7', '#14d8cb', '#1ccf79', '#ffd83b', '#f65570', '#9850fc'],
        series: [
          {
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            clockwise: false, // 饼图是否顺时针展示
            data: [
              { value: 422, name: '360元以上' },
              { value: 335, name: '315-360元' },
              { value: 310, name: '270-315元' },
              { value: 265, name: '220-270元' },
              { value: 215, name: '180-220元' },
              { value: 152, name: '0-180元' }
            ],
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.3)'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            }

            // animationType: 'scale',
            // animationEasing: 'elasticOut',
            // animationDelay: function (idx) {
            //   return Math.random() * 200
            // }
          }
        ]
      })
      window.addEventListener('resize', function () {
        buyMoney.resize() // myChart 是实例对象
      })
    },
    // 电商数据看板商品销售订单
    barGraph () {
      var market = this.$echarts.init(document.getElementById('market'))
      var category = [
        '冰中岛古树茶龙珠',
        '2006年老班章',
        '宜关南糯山珍藏品ZB',
        '八十年代老生砖250',
        '宜关班章一号100克',
        '鼎鼎丰思乡白茶',
        '宜关易武100克生饼',
        '糯香茶膏砖',
        '顶级冰岛单株散茶',
        '宜关易武珍藏普洱生茶'
      ]
      var barData = [800, 970, 1020, 1160, 1280, 1420, 1610, 1640, 1780, 1970]
      market.setOption({
        title: {
          text: '门店销售排行榜top10'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#333' // 设置文字颜色
          },
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#fff' // 设置背景颜色
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          data: ['250', '500', '750', '1000', '1250', '1500', '1750', '2000'],
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: '#999999',
              fontSize: 10
            }
          }
        },
        yAxis: {
          type: 'category',
          data: category,
          splitLine: { show: false },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: {
            show: false
          },
          offset: 10,
          nameTextStyle: {
            fontSize: 10
          }
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            data: barData,
            barWidth: 18, // 柱子宽度
            barGap: 10,
            smooth: true,
            label: {
              normal: {
                show: true,
                position: 'right',
                offset: [-50, 1],
                textStyle: {
                  color: '#fff',
                  fontSize: 13
                }
              }
            },
            itemStyle: {
              normal: {
                barBorderRadius: [0, 10, 10, 0], // 设置柱子是否圆角
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#4368e6' }
                ])
              }
            }
          }
        ]
      })
      // market.setOption(option)
      window.addEventListener('resize', function () {
        market.resize()
      })
    },
    // 员工数据看板-销售额
    handlerStaffData () {
      var staffData = this.$echarts.init(document.getElementById('staffData'))
      staffData.setOption({
        tooltip: {
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#333' // 设置文字颜色
          },
          backgroundColor: '#fff' // 设置背景颜色
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true // grid区域是否包含坐标轴的刻度标签
        },
        legend: {
          icon: 'rect', // 形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 15, // 设置宽度
          itemHeight: 15, // 设置高度
          itemGap: 24, // 按钮设置间距
          data: ['最高温', '最低温'],
          textStyle: {
            // 文字样式
            color: '#999999',
            fontSize: '12'
          }

        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: { // 坐标轴刻度标签的相关设置
              interval: 0,
              textStyle: {
                color: '#999999',
                fontSize: 14
              }
            },
            axisLine: { // 坐标轴轴线相关设置
              show: true,
              lineStyle: {
                color: '#999999'
              }
            },
            axisTick: { // 坐标轴刻度相关设置。
              show: true,
              alignWithLabel: true // 柱子与X轴刻度对齐
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            data: [500000, 400000, 300000, 200000, 100000, 0],
            axisLine: { // 坐标轴轴线相关设置
              show: false, // 不显示Y轴线条
              lineStyle: {
                color: '#999999'
              }
            },
            axisLabel: {
              formatter: function (value) {
                value = value.toFixed(2)
                value = parseFloat(value)
                value = value.toLocaleString()
                return `￥${value}`
              },
              textStyle: {
                color: '#999999',
                fontSize: 14
              }
            },
            axisTick: { // 坐标轴刻度相关设置
              show: false
            },
            splitLine: { // 坐标在grid区域的分割线
              // show: true,
              lineStyle: {
                type: 'dashed'// 设置分割线样式（图标横线颜色）
              }
            }
          }
        ],
        series: [
          {
            name: '最高温',
            type: 'bar',
            barWidth: '10%',
            emphasis: {
              focus: 'series'
            },
            data: [98666, 150000, 129633, 255555, 366666, 433333, 120000, 88888, 153333, 246666],
            barGap: 0, // 俩根柱子之间不需要间距
            itemStyle: {
              normal: {
                barBorderRadius: [3, 3, 0, 0] // 设置柱子是否圆角
              }
            }
          },

          {
            name: '最低温',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            barWidth: '10%',
            data: [150000, 366666, 433333, 366666, 98666, 246666, 433333, 255555, 120000, 88888],
            itemStyle: {
              normal: {
                barBorderRadius: [3, 3, 0, 0] // 设置柱子是否圆角
              }
            }
          }

        ],
        color: ['#2d7cdf', '#16d7ca']

      })
      window.addEventListener('resize', function () {
        staffData.resize()
      })
    },
    // 客户数据看板
    handlerClientData () {
      var clientData = this.$echarts.init(document.getElementById('clientData'))
      clientData.setOption({
        title: {
          text: '客户购买频次分布'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          textStyle: {
            color: '#333' // 设置文字颜色
          },
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#fff', // 设置背景颜色
          // formatter: '{b} : {c} ({d}%)'
          formatter: function (params, ticket, callback) {
            // params.forEach((item) => {
            return `<div ><span class="fl" style="display:inline-block;margin-top:6px;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${params[0].color}"></span><span class="fl"> ${params[0].axisValue}  </span><p style='display: flex;justify-content: space-between;'><span style="padding-left:18px;margin-right: 40px;"> 客户数 </span> ${params[0].value}人 </p><p style='display: flex;justify-content: space-between;'><span style="padding-left:18px;margin-right: 45px;"> 频次占比 </span>${Number(params[0].value / 100).toFixed(2)}%</p></div>`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true // grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: 'category',
          data: ['少于2次（不含2次）', '2-3次', '4-5次', '大于5次（不含5次）'],
          axisTick: { // 坐标轴刻度相关设置。
            show: true,
            alignWithLabel: true // 柱子与X轴刻度对齐
          },
          axisLabel: { // 坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: {
              color: '#999999',
              fontSize: 14
            }
          },
          axisLine: { // 坐标轴轴线相关设置
            show: true,
            lineStyle: {
              color: '#999999'
            }
          }

        },
        yAxis: {
          type: 'value',
          data: [0, 20, 40, 60, 80, 100],
          axisLabel: {
            color: '#999999', // y轴字体颜色
            fontSize: 14,
            formatter: function (value) { // y轴自定义数据
              return value.toFixed(2) + '%'
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#999999'
            }
          },
          axisTick: { // 坐标轴刻度相关设置
            show: false
          },
          splitLine: { // 坐标在grid区域的分割线
            // show: true,
            lineStyle: {
              type: 'dashed'// 设置分割线样式（图标横线颜色）
            }
          }

        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: '30%',
            // emphasis: {
            //   focus: 'series'
            // },
            itemStyle: {
              normal: {
                barBorderRadius: [6, 6, 0, 0] // 设置柱子是否圆角
              }
            }
          }
        ],
        color: ['#4168e7']
      })
      window.addEventListener('resize', function () {
        clientData.resize()
      })
    },
    // 客户统计数据-新老客户人数对比
    handlerNumberComparison () {
      var dataList = [
        { value: 333, name: '新客户' },
        { value: 735, name: '老客户' }
      ]
      var numberComparison = this.$echarts.init(document.getElementById('numberComparison'))
      numberComparison.setOption({

        title: {
          text: '新老客户人数对比'
        },
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#12aca3', // 设置文字颜色
            fontSize: 24
          },
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#fff', // 设置背景颜色
          borderRadius: '50',

          formatter: function (params, ticket, callback) {
            console.log(params)
            return `<div style='width:90px;height:90px;display:flex; justify-content: center;align-items: center;'> ${Number(params.percent).toFixed(2)}%</div>`
          }
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',
          x: 'right',
          y: 'center',
          orient: 'vertical', // 设置图例排列纵向显示
          align: 'left', // 设置图例中文字位置在icon标识符的右侧
          left: '80%',
          top: '40%',
          data: ['新客户', '老客户'],
          itemGap: 10, // 设置图例之间的间距
          padding: [0, 0, 0, 0], // 设置图例与圆环图之间的间距
          textStyle: {
            // 文字样式
            color: '#333333',
            fontSize: '12'
          },
          formatter: function (name) { // 添加这个方法后必须要return 参数 才会显示值
            var value
            dataList.forEach((item) => {
              if (item.name === name) {
                value = item.value
              }
            })
            return `${name}：${value}人`
          }
        },
        color: ['#4168e7', '#14d8cb'],
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            roseType: 'radius',
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 333, name: '新客户' },
              { value: 735, name: '老客户' }
            ]
          }
        ]
      })
      window.addEventListener('resize', function () {
        numberComparison.resize()
      })
    }
  }

}
</script>

<style scoped lang="scss">
.proCharts{
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
    // background: rgb(14, 51, 129);
}
.marketLimit{
  width: 65%;
  height: 400px;
}
.buyMoney{
  width: 35%;
  height: 400px;
}

.orderTitle{
  margin-right: 20px;
}
.market{
  width: 50%;
  height: 500px;

}
.staffData{
  width: 100%;
  height: 500px;
}
.clientData{
  width: 50%;
  height: 500px;
}
.numberComparison{
   width: 50%;
  height: 500px;
}
</style>
